<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指纹录入</title>
    <link href="../../../layui/css/layui.css" rel="stylesheet">
    <link href="../../../static/css/style.css" rel="stylesheet">
    <script src="../../../static/js/jquery.min.js"></script>
    <script src="../../../static/js/jquery.cookie.js"></script>
    <script src="../../../layui/layui.js"></script>
    <script src="../../../static/js/base.js"></script>
    <script src="../../../static/js/ax.js"></script>
    <script src="../../../static/js/avalon.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="../../../static/js/html5.js"></script>
    <script src="../../../static/js/respond.js"></script>
    <![endif]-->

</head>
<body class="bg_w">

<div class="xyxx" ms-controller="test">
    <div class="layui-card-body">
        <form class="layui-form layui-form-pane" action="" lay-filter="component-form-element">
            <div class="layui-form-item">

                <object width="4" height="4" id="CTRL_Enroll" classid="clsid:F6699FCB-6998-461A-AF7C-F7F64444D50E"
                        codebase="js/ActiveEnroll-20171019-1,10,19,1.cab#Version=1,10,19,1" type="application/x-oleobject" border="0">
                    <PARAM NAME="_Version" VALUE="65536"><PARAM NAME="_ExtentX" VALUE="10583"><PARAM NAME="_ExtentY" VALUE="10583"><PARAM NAME="_StockProps" VALUE="0">
                </object>

                <div class="layui-row layui-col-space20">
                    <div class="layui-col-sm4" style="padding: 10px 5%;text-align: center; ">
                        <div style="border: 1px solid #cdcdcd;min-height: 150px;">
                            <img ms-attr="{src:@zwimg1}" style="max-width: 100%;">
                        </div>

                    </div>
                    <div class="layui-col-sm4" style="padding: 10px 5%; text-align: center;">
                        <div style="border: 1px solid #cdcdcd; min-height: 150px;">
                            <img ms-attr="{src:@zwimg2}" style="max-width: 100%;">
                        </div>
                    </div>
                    <div class="layui-col-sm4" style="padding: 10px 5%; text-align: center;">
                        <div style="border: 1px solid #cdcdcd; min-height: 150px;">
                            <img ms-attr="{src:@zwimg3}" style="max-width: 100%;">
                        </div>

                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: right;">

            </div>

            <div class="layui-form-item layui-col-space10">
                <div class="layui-input-block">

                    <button id="btnClose" class="layui-btn layui-btn-primary btn-left">关闭</button>
                    <button class="layui-btn add_btn btn-left" lay-submit lay-filter="component-form-element">提交</button>
                    <a class="layui-btn delete_btn btn-left" :click="deleteZW()">清空</a>
                    <a class="layui-btn add_btn btn-left" :click="zwlr()">录入指纹</a>

                </div>
            </div>
        </form>
    </div>
</div>


</body>

<script>
    var fileTypes=getQueryString("fileTypes");


    var vm = avalon.define({
        $id:'test',
        zwimg1:'',
        zwimg2:'',
        zwimg3:'',
        //录入指纹
        zwlr:function(){
            console.log('录入指纹')

            var encodekey = "0UkiI987H";
            var mealtype = 1;
            var studentcode = '9b8fbb422ec3f25ca1ceaa9363b252228888989';
            var devicekey = "9b8fbb422ec3f25ca1ceaa9363b252228888989";
            try{
                var enroll_obj = document.getElementById("CTRL_Enroll");
                enroll_obj.SetEnrollCallBack(vm.callback_Enroll_once,vm.callback_Enroll_end);
                enroll_obj.BeginEnroll( mealtype , studentcode,"0UkiI987H");

            }catch(ex){
                alert("<label>请检查指纹驱动是否安装成功，请检查指纹设备是否通电，请用IE游览器打开并用管理员方式运行IE游览器，请设置IE游览器环境</label><br/>"+ex);
            }

        },
        //清空指纹
        deleteZW:function(){
            vm.zwimg1='';
            vm.zwimg2='';
            vm.zwimg3='';
        },

        callback_Enroll_once:function (result) {
            var json = JSON.parse(result);
            if(json.count == "1"){
                vm.zwimg1= "data:image/png;base64,"+json.ImgBase64;
            }else if(json.count == "2"){
                vm.zwimg2= "data:image/png;base64,"+json.ImgBase64;
            }else if(json.count == "3"){
                vm.zwimg3= "data:image/png;base64,"+json.ImgBase64;
            }
        },


        callback_Enroll_end:function (result){
            var json = JSON.parse(result);
            if(json.retcode > 0){
                if(json.errorMsg == "未检测指纹采集硬件设备，请插入指纹采集硬件设备。"){
                    top.bootbox.alert("检测指纹采集硬件设备，请插入指纹采集硬件设备");
                    return;
                }
            }else{
                //$("#uploadBase64").val(json.Base64);
                alert("指纹设备验收成功，请放心使用！");
            }
        }


    });
    vm.$watch('studentdata', function () {

    });

    var table;
    var form;

    layui.use(['table','form','laydate','layer','upload'], function() {
        table = layui.table;
        form = layui.form;
        var laydate = layui.laydate,
            layer=layui.layer,
            $ = layui.jquery,
            upload = layui.upload;


        //监听提交
        form.on('submit(component-form-element)', function(data){

            var piclist=[vm.zwimg1,vm.zwimg2,vm.zwimg3]
            parent.document.getElementById("zwimg").value = JSON.stringify(piclist);

            return false;

        });

        //关闭弹窗
        $('#btnClose').on("click", function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
    });


</script>
</html>